<script lang="ts" setup>
import { md5Encryption } from '@/utils';
import accountLogin from './modules/accountLogin.vue';
import AccountRegistration from './modules/AccountRegistration.vue';
import ForgotPassword from './modules/ForgotPassword.vue';
import {ElMessage} from "element-plus";
import {useStore } from 'vuex'
import { Session,Local } from '@/utils/storage';
import chat from "@/api/chat";
import {forgetPassword, login, protocol} from "@/api/api";
import { ref, getCurrentInstance } from 'vue'
import bus from 'vue3-eventbus'
const { proxy } = getCurrentInstance()
const store = useStore()
const router = useRouter();
onMounted(()=> {
  // chat.create()
})
const form = reactive({
  show: false,
  title: '用户协议',
  agreement: '',
  navIndex: 0,
  logData: {},
  signInData: {},
  storage: false,
  loading:false
});
const el = reactive({
  
})
const signInDataText = () => {
  if(!form.signInData.userPhone || form.signInData.userPhone === ''){
    ElMessage.error('请输入手机号码')
    return false
  }
  if(!form.signInData.code || form.signInData.code === ''){
    ElMessage.error('请输入验证码')
    return false
  }
  if(!form.signInData.userPaw || form.signInData.userPaw === ''){
    ElMessage.error('请设置密码')
    return false
  }
  if(!form.signInData.autPassword || form.signInData.autPassword === ''){
    ElMessage.error('请再次输入密码')
    return false
  }
  if(form.signInData.userPaw !== form.signInData.autPassword){
    ElMessage.error('两次输入密码不一致')
    return false
  }
  return true
}
const next = () => {
  if(form.navIndex === 2){
    forgetPassword(form.signInData).then((res:any) => {
      if(res.code === 200){
        ElMessage.success('密码修改成功')
        form.navIndex = 0
      }
    })
  }
  if(form.navIndex === 1){
    if(signInDataText()){
      // store.dispatch('user/setSignIn',form.signInData)
      router.push({
        path: '/authentication',
        query: form.signInData
      });
    }
  } 
  if(form.navIndex === 0){
    if(!form.logData.userPhone || form.logData.userPhone === ''){
      ElMessage.error('请输入账号')
      return false
    }
    if(!form.logData.userPaw || form.logData.userPaw === ''){
      ElMessage.error('请输入密码')
      return false
    }
    form.loading = true
    login(form.logData).then((res:any) => {
      form.loading = false
      if(res.code === 200) {
        Session.set('ZJ_token', res.data.accessToken)
        Local.set('ZJ_userInfo', res.data)
        //登录IM
        chat.create()
        // console.log(chat.chat)
        chat.chatLogin(chat.create()).then((res: any) => {
          console.log(res)
          form.loading = false
          if (res.data.actionStatus === 'OK') {
            ElMessage.success('登录成功')
            bus.emit('chatLogin')
            router.push({
              path: '/home',
              query: {
                initialize:'1'
              }
            })
          } else {
            ElMessage.error('IM登录失败')
          }
        })
      }
      form.loading = false
      console.log(res)
    }).catch((err:any) => {
      form.loading = false
    })
  }
};
const signInMonitor = (e:object) => {
  form.signInData = e
}
const loginMonitor = (e:object) => {
  form.logData = e
}
const agreementFun = (index:number) => {
  protocol({searchType:index}).then((res:any) => {
    form.agreement = res.data.initValue
    form.show = true
  })
}
</script>
<template>
  <div class="loginBackdrop">
    <div class="panel">
      <div class="panel-box">
        <div class="panel-nav">
          <div class="panel-nav-item" @click="form.navIndex = 0">
            <div>账号登录</div>
            <div class="nav-item-markers" v-if="form.navIndex === 0" />
          </div>
          <div class="panel-nav-item" @click="form.navIndex = 1">
            <div>账号注册</div>
            <div class="nav-item-markers" v-if="form.navIndex === 1" />
          </div>
        </div>
        <div class="loginData">
          <div v-if="form.navIndex === 0">
            <accountLogin @change="loginMonitor"/>
          </div>
          <div v-if="form.navIndex === 1">
            <AccountRegistration @change="signInMonitor"/>
          </div>
          <div style="margin-top: 20px" v-if="form.navIndex === 2">
            <ForgotPassword @change="signInMonitor"/>
          </div>
          <div>
            <el-button class="loginData-bottom" @click="next" :loading="form.loading">{{form.navIndex === 0 ? '登录' : form.navIndex === 1 ? '下一步，验证身份' : '完成'}}</el-button>
            <div v-if="form.navIndex === 0" style="
                display: flex;
                justify-content: space-between;
                align-items: center;
              ">
              <el-checkbox
                v-model="form.storage"
                label="记住密码"
                size="large"
              />
              <div style="color: #a02831;cursor: pointer" @click="form.navIndex = 2">忘记密码</div>
            </div>
            <div style="font-size: 12px; margin-top: 10px; text-align: center" v-if="form.navIndex === 0">
              <span>登录即代表你已阅读并同意<span style="cursor: pointer" @click="agreementFun(2)">《用户协议》</span>和<span style="cursor: pointer" @click="agreementFun(3)">《隐私政策》</span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
        v-model="form.show"
        title="要遵守的协议"
        width="50%"
    >
      <div v-html="form.agreement"></div>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
.loginBackdrop {
  background: url('@/assets/img/loginBackdrop.jpg') 100%/100% no-repeat;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;

  .panel {
    width: 600px;
    //height: 50%;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 0 10px 0 #f7cdcb;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;

    .panel-box {
      width: 60%;
      margin: 0 auto;
      height: 100%;

      .panel-nav {
        display: flex;
        justify-content: space-around;
        font-size: 24px;

        .panel-nav-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          cursor: pointer;

          .nav-item-markers {
            width: 30%;
            height: 5px;
            margin-top: 5px;
            border-radius: 5px;
            background-color: #a02831;
          }
        }
      }

      .loginData {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 85%;

        .loginData-bottom {
          width: 100%;
          box-sizing: border-box;
          padding: 25px !important;
          background-color: #a02831;
          margin-top: 60px;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          color: white;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
